<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./player.css" />
  </head>
  <body>
    <div id="app">
      <div class="app-palyer">
        <!-- 头部 名字+搜索框 -->
        <div class="app-player-searchBar">
          <div class="title">呵呵呵的音乐盒</div>
          <!-- 搜索框 -->
          <input type="text"  />
        </div>
        <!-- 中间内容 -->
        <div class="app-player-content">
          <!-- 左边歌曲信息 -->
          <div class="app-player-content-left">
            <div class="app-player-songs-list">
              <!-- 歌曲 -->
              <div class="app-player-songs-list-item">
                <!-- 音频按钮 -->
                <div class="player-audio" ></div>
                <!-- 歌曲名 -->
                <div class="player-name">
                  {{item.name}}
                </div>
                <!--MV按钮-->
                <div class="player-mv" ></div>
              </div>
            </div>
          </div>
          <!-- 中间的中间部分：音频播放时的动画效果和歌曲封面图 -->
          <div class="app-player-content-middle">
            <!-- 柄 -->
            <img src="./imgs/player_bar.png" alt="" class="player-bar"/>
            <!-- 歌曲封面图 -->
            <img src="https://p2.music.126.net/nQUhiSnK620HHLbZwnrJ3g==/109951163298363015.jpg" alt="" class="cover"/>
            <!-- CD -->
            <img src="./imgs/disc.png" alt="" class="disc" />
          </div>
          <!-- 中间的右边部分：热门评论 -->
          <div class="app-player-content-right">
            <h5 class="comment-title">热门评论</h5>
            <div class="comment-list">
              <div class="comment-list-item" >
                <!-- 用户头像 -->
                <div class="imageWrapper">
                  <img src="" alt=""/>
                </div>
                <!-- 内容：用户昵称、评论内容 -->
                <div class="comment-content">
                  <!-- 用户昵称 -->
                  <div class="nickName">{{item.user.nickname}}</div>
                  <!-- 评论内容 -->
                  <div class="content">
                    {{item.content}}
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
        <!-- 底部：音频播放、视频播放 -->
        <div class="app-player-footer">
          <!-- 音频播放 -->
          <audio
            controls="controls"
            autoplay="autoplay"
            loop="loop"
            
          ></audio>
          <!-- MV播放 -->
          <div class="video-box" class="hidden" style="display: none;">
            <!-- MV关闭按钮 -->
            <div class="vedio-close" >X</div>
            <!-- MV播放区 -->
            <video
              controls="controls"
              autoplay="autoplay"
              loop="loop" 
            ></video>
            <!-- MV遮罩背景区 -->
            <div class="video-mask"></div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="./node_modules/vue/dist/vue.js"></script>
  <script src="./node_modules/axios/dist/axios.js"></script>
  <script src="./js/myaxios.js"></script>
  <script src="./js/style.js"></script>
</html>
